<template>
  <t-row style="background-color: white;margin-top: 10px;">
  </t-row>
  <!-- 
        rowKey：取出每行数据的id属性
        data:table显示的数据行集合
        columns:定义表格的列的
        stripe：隔行变色，斑马纹
      
      -->
  <t-table :data="data" :columns=columns :stripe=stripe :bordered=bordered :hover=hover size="medium"
    table-layout="auto" :showHeader=showHeader cellEmptyContent="-" resizable>
    <template #rowIndex="{ rowIndex }">
      {{ rowIndex + 1 }}
    </template>
    <template #type="{ row }">
      <t-tag theme="primary" v-if="row.type == 1">探访</t-tag>
      <t-tag theme="danger" v-if="row.type == 0">参观</t-tag>
    </template>
    <template #createTime="{ row }">
      {{ fmtTime(row.createTime) }}
    </template>
    <template #status="{ row }">
      <!-- 0：待报道，1：已完成，2：取消，3：过期 -->
      <t-tag theme="primary" v-if="row.status == 0">待报道</t-tag>
      <t-tag theme="danger" v-if="row.status == 1">已完成</t-tag>
      <t-tag theme="default" v-if="row.status == 2">取消</t-tag>
      <t-tag theme="warning" v-if="row.status == 3">过期</t-tag>
    </template>
  </t-table>

  <t-pagination showFirstAndLastPageBtn :total="pagination.total" :default-current="pagination.current"
    :default-page-size="10" @current-change="onCurrentChange" @page-size-change="onPageSizeChange" />

</template>

<script setup lang="ts">
import columns from '../columns'
import { ref } from 'vue'
import dayjs from 'dayjs'

// 表格的数据应该是父组件传递过来的
const props = defineProps(["data", "pagination"])
const emits = defineEmits(['changePage', 'changPageSize'])

const stripe = true
const bordered = true
const showHeader = true
const hover = true

// 翻页
function onCurrentChange(page) {
  emits('changePage', page)
}

function onPageSizeChange(size) {
  emits('changPageSize', size)
}

function fmtTime(time) {
  // 格式化日期
  return dayjs(time).format('YYYY/MM/DD')
}
</script>